<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>任务十：Flexbox 布局练习</title>

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.flex-container {
			display: flex;
			flex-flow: row wrap;
			justify-content: space-between;
			padding: 20px;
			border: 1px solid #ddd;
			margin-top: 20px;
			align-items: center;
		}
		@media (max-width: 640px){
			.flex-container {
				display: flex;
				flex-flow: row wrap;
				justify-content: space-between;
				padding: 20px;
				border: 1px solid #ddd;
				margin-top: 20px;
				align-items: flex-start;
			}
			.flex-item1{
				order: 2;
			}
			.flex-item2{
				order: 3;
			}
			.flex-item3{
				order: 4;
			}
			.flex-item4 {
				order: 1;
			}
		}
		.flex-item {
			width: 150px;
			background-color: #f00;
			color: white;
		    font-weight: bold;
		    font-size: 2em;
		    text-align: center;
		    margin: 20px;
		}
		.flex-item1 {
			height: 120px;
		}
		.flex-item2 {
			height: 100px;
		}
		.flex-item3 {
			height: 40px;
		}
		.flex-item4 {
			height: 200px;
		}

	</style>
</head>
<body>
<div class="flex-container">
	<div class="flex-item flex-item1">1</div>
	<div class="flex-item flex-item2">2</div>
	<div class="flex-item flex-item3">3</div>
	<div class="flex-item flex-item4">4</div>
</div>
</body>
</html>